<html>
<head>
<#assign basePath=request.contextPath>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>后台管理系统</title>
<#include "/WEB-INF/views/template/bootMainCss.ftl" parse=true encoding="utf-8">
    <link href="${basePath}/bootstrap/css/font-awesome.min.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/css/form.lzy.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/css/good.lzy.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css"
          rel="stylesheet">
    <style>
        .row {
            margin: 0;
        }

        .search {
            float: right;
        }

        .shop-img {
            text-align: left;
            padding-left: 30px;
        }

        .shop-img img {
            float: left;
            margin-right: 10px;
        }

        .shop-img span {
            display: block;
        }

        .name {
            text-align: left;
            padding-left: 30px;
        }

        .name span {
            display: block;
        }

        #tbodyId {
            font-size: 13px;
        }

        #myTable thead {
            font-size: 14px;
        }

        .panel {
            margin-bottom: 20px;
        }

        .align {
            text-align: center;
        }
    </style>
</head>
<body>

<div class="panel panel-lzy">
    <div class="panel-body">
        <h5 class="tips-lzy">操作提示</h5>
        <ul class="tips-list-lzy">
            <li>◆&nbsp;<span>该页面统计所有佣金信息。</span></li>
        </ul>
    </div>
</div>

<div class="panel panel-f5">
    <div class="panel-body">
        <form id="myForm" class="form-inline form-margin-right">
            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <select class="form-control required" id="type" name="type" onchange="getTip()">
                            <option value="">选择分佣类型</option>
                            <option value="1">协议首次分佣</option>
                            <option value="2">产品销售分佣</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <select class="form-control" name="sourceId" id="protocolId" onchange="getSystem()">
                            <option value="">请选择协议</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <select class="form-control required" id="systemId" name="systemId">
                            <option value="">选择体系</option>
                        </select>
                    </div>
                    <div class="form-group" style="display: inline-block">
                        <div id="start_visit_time" class="input-group date form_datetime">
                            <span class="input-group-addon">开始日期</span>
                            <input id="startTime" name="startTime" class="form-control" size="16" type="text" value="" readonly>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                        <div id="end_visit_time" class="input-group date form_datetime">
                            <span class="input-group-addon">结束日期</span>
                            <input id="endTime" name="endTime" class="form-control" size="16" type="text" value="" readonly>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" id="key" name="key" placeholder="姓名/手机号">
                    </div>
                    <div class="form-group">
                        <button type="button" class="btn btn-primary btn-sm" onclick="search(1)">查询</button>
                    </div>
                </div>
            </div>

            <div class="panel-body row panel-white">
                <div class="cash-info-tip align">
                    <span>分佣数（笔）:
                        <b id="totalCount"></b>
                    </span>
                </div>
                <div class="cash-info-tip" style="margin-left: 600px;">
                    <span>分佣金额（元）:
                        <b id="totalSum"></b>
                    </span>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="panel panel-f5" style=" height: 380px;">
    <div class="panel-body row">
        <div style="float: left; width: 50%;" class="panel-white align">
            <h3>分佣笔数趋势图</h3>
            <div class="cash-info-tip" style="background-color: #EEEEEE">
             <span>今日分佣数（笔）:
             <b id="dayCount"></b>
             </span>
                <span>昨日分佣数（笔）:
             <b id="yesCount"></b>
             </span>
            </div>
            <div id="orderNum" style="width: 90%;height:260px;"></div>
        </div>
        <div style="float: right; width: 50%; display:inline-block;" class="panel-white align">
            <h3>分佣金额趋势图</h3>
            <div class="cash-info-tip" style="background-color: #EEEEEE">
             <span>今日分佣金额（元）:
             <b id="daySum"></b>
             </span>
                <span>昨日分佣金额（元）:
             <b id="yesSum"></b>
             </span>
            </div>
            <div id="orderPrice" style="width: 90%;height:260px;"></div>
        </div>
    </div>
</div>

<div class="panel-heading row">
    <button type="button" class="btn btn-primary btn-sm" onclick="exportOrderList();">导出数据</button>
</div>

<div class="panel panel-f5">
    <div class="panel-body row">
        <div class="panel-body panel-white">
            <div class="table-responsive">
                <table id="myTable"
                       class="table table-hover"
                       data-url="${basePath}/admin/agent/commissionBill/agentCommissionBillList"
                       data-pageSize="10,50,100" data-method="GET">
                    <thead>
                    <!-- 需要循环的字段  对应mapper文件-->
                    <tr>
                        <th data-type="xuhao">序号</th>
                        <th data-field="name">姓名</th>
                        <th data-field="phone" data-call="true">手机号</th>
                        <th data-field="sourceName">所属协议</th>
                        <th data-field="systemName">所属体系</th>
                        <th data-field="amount">分佣金额</th>
                        <th data-field="typeName" data-call="true">分佣类型</th>
                        <th data-field="orderId" data-call="true">订单号</th>
                        <th data-field="createTime" data-call="true">分佣时间</th>
                    </tr>
                    </thead>
                    <tbody id="tbodyId">

                    </tbody>
                </table>
            </div>
            <!-- 分页条-->
            <div class="row">
                <div align="left" class="col-xs-6">
                    <div class="input-group">
                        <span class="input-group-addon" id="pageCount"></span> <select
                            id="pageSize" onchange="search(1)" class="form-control"
                            style="width: 100px"></select>
                    </div>
                </div>
                <div align="right" class="col-xs-6">
                    <ul class="pagination" id="pagination"></ul>
                </div>
            </div>
        </div>
    </div>
</div>



<#include "/WEB-INF/views/template/bootMainJs.ftl" parse=true encoding="utf-8">
<script type="text/javascript" src="${basePath}/bootstrap/js/utils.js" type="text/javascript"></script>
<script type="text/javascript" src="${basePath}/bootstrap/plugin/echarts.min.js"></script>
<script type="text/javascript"
        src="${basePath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript"
        src="${basePath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript" src="${basePath}/bootstrap/plugin/jqPaginator/jqPaginator.js"></script>
<script type="text/javascript" src="${basePath}/bootstrap/plugin/jqPaginator/myPage.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('orderNum'));
    var twoChart = echarts.init(document.getElementById('orderPrice'));
    var xAxisCount = [];
    var seriesCount = [];
    var seriesSum = [];
    var twoOption = {
        color: ['#f00'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: xAxisCount,
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
                //max: 400
            }
        ],
        series: [
            {
                name: '分佣金额',
                type: 'bar',
                barWidth: '40px',
                data: seriesSum
            }
        ]
    };

    // 指定图表的配置项和数据
    var option = {
        color: ['#3398DB'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: xAxisCount,
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
                //max: 12
            }
        ],
        series: [
            {
                name: '分佣笔数',
                type: 'bar',
                barWidth: '40px',
                data: seriesCount
            }
        ]
    };


    $('#taxInvoice').on('change', function () {
        var taxInvoiceV = $(this).val();
        if (taxInvoiceV == 0) {
            window.location.href = "#";
        } else if (taxInvoiceV == 1) {
            window.location.href = "#";
        }
    });

    var arrFlag = true;
    function getData(){
        var jsonData = {};
        $("#myForm").find("input").each(function(){
            jsonData[$(this).attr('id')] = $(this).val();
        });
        $("#myForm").find("select").each(function(){
            jsonData[$(this).attr('id')] = $(this).val();

        });
        $.ajax({
            url: '${basePath}/admin/agent/commissionBill/statistics',
            type: 'GET',
            dataType: 'json',
            data: jsonData,
            success: function(data){
       //         console.log(data)
                //佣金合计 totalBill;
                //按月佣金合计 monthBill;
                //昨天和今日的佣金 dayBill;
                var monthBill = data.monthBill;
                for(var i=0,len=monthBill.length;i<len;i++){
                    if(xAxisCount.indexOf(monthBill[i].billMonth + '-' + monthBill[i].billDay)=="-1"){
                        xAxisCount.push(monthBill[i].billMonth + '-' + monthBill[i].billDay);
                        seriesCount.push(monthBill[i].billCount);
                        seriesSum.push(monthBill[i].billSum);
                    }
                }
                if(arrFlag){
                    arrFlag = false;
                    xAxisCount.reverse();
                    seriesCount.reverse();
                    seriesSum.reverse();
                }

                //分佣笔数
                if(!data.totalBill.billCount){
                    $("#totalCount").text(0);
                }else{
                    $("#totalCount").text(data.totalBill.billCount);
                }

                //分佣金额
                if(!data.totalBill.billSum){
                    $("#totalSum").text(0);
                }else{
                    $("#totalSum").text(data.totalBill.billSum);
                }

                var now = new Date();
                var today = now.getDate();
                //console.log(today)

                var dayBill = data.dayBill;
                if(dayBill.length){
                    //今天
                    if(dayBill[0].billDay == today){
                        $("#dayCount").text(dayBill[0] ? dayBill[0].billCount : 0);
                        $("#daySum").text(dayBill[0] ? dayBill[0].billSum : 0);
                        $("#yesCount").text(dayBill[1] ? dayBill[1].billCount : 0);
                        $("#yesSum").text(dayBill[1] ? dayBill[1].billSum : 0);

                    }
                    //昨天
                    else{
                        $("#dayCount").text(dayBill[1] ? dayBill[1].billCount : 0);
                        $("#daySum").text(dayBill[1] ? dayBill[1].billSum : 0);
                        $("#yesCount").text(dayBill[0] ? dayBill[0].billCount : 0);
                        $("#yesSum").text(dayBill[0] ? dayBill[0].billSum : 0);
                    }
                }
                else{
                    $("#dayCount").text(0);
                    $("#daySum").text(0);
                    $("#yesCount").text(0);
                    $("#yesSum").text(0);
                }

            },
            error: function(){
                console.log("error")
            }
        }).done(function(){
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            twoChart.setOption(twoOption, false, true);
        })
    }

    //关闭订单
    function closeSale(orderId) {
        layer.confirm('是否确定此操作？', {
            btn: ['确定', '取消'] //按钮
        }, function () {
            $.ajax({
                type: 'GET',
                url: '${basePath}/admin/order/close?orderId=' + orderId,
                dataType: 'json',
                data: {},
                success: function (data) {
                    if (data.resultVO.code == '0000') {
                        layer.alert('关闭成功!', {
                            icon: 6
                        }, function (index) {
                            layer.closeAll('dialog');
                            location.reload();
                        });
                    }
                }
            });
        });
    }

    //导出
    function exportOrderList() {
        layer.confirm('是否确定此操作？', {
            btn: ['确定', '取消'] //按钮
        }, function () {
            var jsonData = {};
            $("#myForm").find("input").each(function(){
                jsonData[$(this).attr('id')] = $(this).val();
            });
            $("#myForm").find("select").each(function(){
                jsonData[$(this).attr('id')] = $(this).val();

            });
            var mJson = "";
            for(var i in jsonData){
                mJson += "?"+i+"="+jsonData[i]+"&";
            }
            window.location.href = '${basePath}/admin/agent/commissionBill/exportAgentCommissionBill'+mJson;
            layer.closeAll();
        });
    }

    //获取体系
    function getSystem(){
        $.ajax({
            url: '${basePath}/admin/agent/commissionBill/systemList',
            type: 'GET',
            dataType: 'json',
            data: {
                sourceId: $("#protocolId").val(),
                type: $("#type").val()
            },
            success: function(data){
                var systemList = data.result.systemList;
                var temp = "<option value=''>选择体系</option>";
                if(systemList){
                    for(var i=0,len=systemList.length;i<len;i++){
                        if(systemList[i]){
                            temp += "<option value='"+systemList[i].systemId+"'>"+systemList[i].systemName+"</option>";
                        }
                    }
                    $("#systemId").html(temp);
                }
            },
            error: function(){
                console.log("error")
            }
        })
    }
    //获取协议
    function getTip(){
        $("#systemId").html("<option value=''>选择体系</option>");
        $.ajax({
            url: '${basePath}/admin/agent/commissionBill/screenList',
            type: 'GET',
            dataType: 'json',
            data: {
                type: $("#type").val()
            },
            success: function(data){
                var screenList = data.result.agentBillScreenListDtoList;
                //console.log(screenList);
                var temp = "<option value=''>请选择协议</option>";
                if(screenList){
                    for(var i=0,len=screenList.length;i<len;i++){
                        if(screenList[i]){
                            temp += "<option value='"+screenList[i].protocolId+"'>"+screenList[i].protocolName+"</option>";
                        }
                    }
                    $("#protocolId").html(temp);
                }
            },
            error: function(){
                console.log("error")
            }
        })
    }

    $(function () {
        getData();
        $('#start_visit_time').datetimepicker({
            minView: "month", //选择日期后，不会再跳转去选择时分秒
            format: "yyyy-mm-dd", //选择日期后，文本框显示的日期格式
            language: 'zh-CN', //汉化
            //startDate: new Date(),
            autoclose: true //选择日期后自动关闭
        }).on("changeDate", function () {
            $("#end_visit_time").datetimepicker("setStartDate", $("#startTime").val());
        });

        $('#end_visit_time').datetimepicker({
            minView: "month", //选择日期后，不会再跳转去选择时分秒
            format: "yyyy-mm-dd", //选择日期后，文本框显示的日期格式
            language: 'zh-CN', //汉化
            autoclose: true //选择日期后自动关闭
        }).on("changeDate", function () {
            $("#start_visit_time").datetimepicker("setEndDate", $("#endTime").val());
        });


    })



</script>
</body>
</html>